<template>
	<view>
		<view class="header-box">
			<head-left-nav text-content="健康咨询" :title-color="'#303133'" :is-back-show="false"></head-left-nav>
		</view>
		<view style="position: absolute;top: 200rpx;width: 100%;">
			<view class="flex alignC top_btn" @click="handleClick">
				<image src="/static/icon_jz.png" mode=""></image>
				<view class="title">预约就诊</view>
			</view>
			<view class="main_box">
				
					<view class="align-end">
						<view style="font-size: 32rpx;color: #000000;">寻找医生</view>
						<view style="font-size: 22rpx;color: #B1B1B1;margin-left: 16rpx;">指定医生 获取专业意见</view>
					</view>
					<u-sticky bg-color="#ffffff00">
					<u-tabs :list="deptList" name="label" gutter="16" :current="current" @change="changeTab"
						bar-height="8" bar-width="40" active-color="#3FBEBB" inactive-color="#686868" bg-color="#ffffff00"></u-tabs>
				</u-sticky>
				<view class="list_box">
					<view class="list_item align-center" v-for="item in doctorList" :key="item.id" @click="toPage(`/subpkg/doctorIntro/doctorIntro?id=${item.id}`)">
						<image :src="item.image ? item.image : '/static/logo.png'" mode=""></image>
						<view class="right flex flexColumn">
							<view class="align-center">
								<view style="font-size: 32rpx;color: #000000;">{{ item.name }}</view>
								<view style="font-size: 22rpx;color: #A4A4A4;margin-left: 16rpx;">
									<span v-if="item.professionalTitle">{{ item.professionalTitle }}·</span> {{ item.department }}
								</view>
							</view>
							<view style="font-size: 24rpx;color: #A4A4A4;margin-top: 16rpx;">{{ item.hospital }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headLeftNav from '@/components/HeadLeftNav.vue';
	import {
		getdeptListApi
	} from '@/common/api/lectureApi.js'
	import {
		getDoctorListApi
	} from '@/common/api/doctorApi'
	export default {
		components: {
			headLeftNav
		},
		data() {
			return {
				deptList: [],
				current: 0,
				doctorList: [],
				department: ''
			}
		},
		methods: {
			changeTab(index) {
				this.current = index;
				this.department = this.deptList[index].label
				console.log(this.department,'this.department')
				this.doctorList = []
				this.getDoctorList()
			},
			// 预约就诊
			handleClick() {
				uni.$showMsg('敬请期待')
			},
			// 科室分类
			async getdeptList() {
				const r = await getdeptListApi()
				this.deptList = r.data
				console.log(this.deptList,'this.deptList')
				this.department = this.deptList[0].label
				this.doctorList = []
				this.getDoctorList()
				// this.categoryCode = this.deptList[0].id
			},
			// 获取医生列表
			async getDoctorList() {
				const res = await getDoctorListApi({
					name: '',
					pageNum: 1,
					pageSize: 1000,
					hospital: '',
					department: this.department
				})
				this.doctorList.push(...res.data.records)
				
			},
		},
		async onLoad() {
			await this.getdeptList()
			
		}
	}
</script>

<style>
	page{
		background: #F8F8F8;
		height: 100vh;
	}
</style>
<style lang="scss" scoped>
/deep/.u-tabs{
	margin-left: -20rpx;
}
.header-box {
	background: linear-gradient(180deg, #D5F0F0 0%, #F8F8F8 100%);
	width: 100%;
	height: 654rpx;
	background-size: 100% 100%;
}
.top_btn{
	height: 156rpx;
	background: linear-gradient( 180deg, rgba(48,202,181,0.15) 0%, rgba(255,255,255,0) 100%), #FFFFFF;
	border-radius: 32rpx;
	padding: 30rpx;
	margin: 0 32rpx 32rpx;
	image{
		width: 94rpx;
		height: 94rpx;
		margin-right: 24rpx;
	}
	.title{
		font-size: 36rpx;
		color: #000000;
	}
}
.main_box{
	background: linear-gradient( 179deg, rgba(48,202,181,0.15) 0%, rgba(255,255,255,0) 100%), #FFFFFF;
	border-radius: 32rpx;
	padding: 30rpx;
	margin: 0 32rpx 32rpx;
	.list_box{
		height: calc(100vh - 610rpx);
		overflow: scroll;
		.list_item{
			margin: 30rpx 0;
			image{
				width: 148rpx;
				height: 148rpx;
				margin-right: 24rpx;
				border-radius: 50%;
			}
		}
	}
}
</style>
